<template>
  <div class="doing scrollbar">
    <vue-seamless-scroll
      :data="list"
      :class-option="seamlessScrollOption"
      style="
        width: 100%;
        height: 100%;
      "
    >
      <div
        class="item"
        v-for="(item,index) in list"
        :key="index"
      >
        <span :title="item.time+','+item.content">{{item.time}}&emsp;{{item.content}}</span>
        <div class="people">
          <span class="tag">{{item.people1||'无'}}</span>
          <span>{{item.people2||'无'}}</span>
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import { calcTimeDiffFormatter } from "../../../utils";
export default {
  name: "box5",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.refresh();
    setInterval(this.refresh, 10 * 1000);
  },
  methods: {
    async refresh() {
      const res = await this.$http.get(
        `/api/RepairReport/RepairLargeScreenModelEList`
      );

      this.list = res.map((v) => ({
        ...v,
        time: calcTimeDiffFormatter(v.ApplyTime),
        content: `${v.DeptName || '/'},${v.EqName} ${v.ProblemDec}`,
        people1: v.ApplyName,
        people2: v.RepairName,
      }));
    },
  },
  computed:{
    seamlessScrollOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  }
};
</script>

<style scoped>
  .item{
    display: flex;
  }
  .people{
    display: flex;
    flex: 1 0 20%;
    justify-content: space-between;
    align-items: center;
  }
  .people span.tag{
    display: inline-block;
    width: auto;
  }

</style>